<template>
  <div class="login">
    <div class="top">
      <div class="sameDiv">
        <img src="../../assets/login/logo1.png" alt="" />
      </div>
    </div>
    <div class="mid">
   
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="thirdForm"
        class="demo-ruleForm"
      >
      <div class="tops">
      <img src="../../assets/login/logo.png" alt="">
      找回机致科技密码
      <!-- xxxxxxxx -->
    </div>
        <el-form-item prop="phone">
          <el-input
          auto-complete="off"
            v-model.trim="ruleForm.phone"
            placeholder="请输入手机号码"
            maxlength="11"
            name="phone"
          ></el-input>
        </el-form-item>

        <el-form-item prop="phoneValidation">
          <div class="code">
            <el-input
            name="phoneValidation"
            auto-complete="off"
              v-model.trim="ruleForm.phoneValidation"
              placeholder="请输入手机验证码"
              style="width: calc(100% - 110px)"
              maxlength="6"
            ></el-input>
            <el-button
              v-show="sendAuthCode"
              @click="sendMsg(ruleForm.phone)"
              type="primary"
              class="sendMsg"
              >发送验证码</el-button
            >
            <el-button v-show="!sendAuthCode" type="primary" class="sendMsg"
              >{{ auth_time }}秒</el-button
            >
          </div>
        </el-form-item>

        <el-form-item prop="password">
          <el-input
          auto-complete="new-password"
            id="pwd"
            v-model.trim="ruleForm.password"
            type="password"
            name="password"
            placeholder="请输入您需设置的新密码"
            minlength="5"
            maxlength="20"
          >
            <i
              slot="suffix"
              class="el-input__icon el-icon-view el-show"
              @click="showPwd"
            ></i>
          </el-input>
        </el-form-item>
        <div class="tips" @click="register">
          新用户? 注册机致科技账号
        </div>

        <el-form-item>
          <el-button class="btn" type="primary" @click="submitForm('thirdForm')"
            >找回密码</el-button
          >
          <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
        </el-form-item>

        <div class="tips1" @click="login">
          已有账号? 立即登录
        </div>

      </el-form>

      <!-- <img src="../../assets/login/bg1.jpg" alt="" /> -->
    </div>

    <div class="footers">
      <div>Copyright @机致科技All Rights Reserved.版权所有</div>
      <div class="same">
        网站备案/许可证号：<a href="http://beian.miit.gov.cn" target="_blank"
          >京ICP备2021001935号-1</a
        >
      </div>

      <div class="same">
        <a
        target="_blank"
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011202003701"
        >
          <img
            class="badge"
            src="../../assets/hui.png"
            alt="pic"
          />&nbsp;&nbsp;京公网安备11011202003701号</a
        >
      </div>
    </div>
  </div>
</template>

<script>

import { forgotpassword, sendcaptcha } from "../../apis/index";
export default {
  name: "login",
  components: {},
  data() {
    return {
      auth_time: "60" /* 倒计时 计数器 */,
      sendAuthCode: true /* 布尔值，通过v-show控制显示‘获取按钮'还是‘倒计时' */,
      ruleForm: {
        phone: "",
        phoneValidation: "",
        password:""
      },
      rules: {
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            pattern:
            /^(\+?86)?(1[3-9]\d{9})$/,
            message: "请检查手机号是否正确",
            trigger: "blur",
          },
        ],
        password: [
        {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 5,
            max: 20,
            message: "密码长度在 5 到 20 个字符",
            trigger: "blur",
          }, ],
        phoneValidation: [
          { required: true, message: "请输入手机验证码", trigger: "blur" },
        ],
      },
    };
  },
  computed: {},
  created() {},
  methods: {
    register(){
      this.$router.push({
        path:"/register"
      })
    },
    login(){
       this.$router.push({
        path:"/login"
      })
    },
     // 是否显示密码
     showPwd() {
      const input = document.getElementById('pwd');
      if (input.type === 'password') {
        input.type = 'text';
      } else if (input.type === 'text') {
        input.type = 'password';
      }
    },
    // 倒计时
    getAuthCode() {
      if (this.authTimeTimer) {
        clearTimeout(this.authTimeTimer);
      }
      this.authTimeTimer = setTimeout(() => {
        this.auth_time -= 1;
        if (this.auth_time < 0) {
          this.sendAuthCode = true;
          clearTimeout(this.authTimeTimer);
        } else {
          this.getAuthCode();
        }
      }, 1000);
    },
    // 发送短信
    sendMsg(phoneNum) {
      this.$refs.thirdForm.validateField("phone", (phoneError) => {
        console.log(`${phoneError}***************************`);

        if (!phoneError) {
          this.auth_time = 60;
          this.sendAuthCode = false;

          sendcaptcha({ username: this.ruleForm.phone })
            .then((res) => {
              console.log(res.data, 4444);
              if (res.data.code == 200) {
                this.getAuthCode();
                this.$confirm("验证码已发送至登记手机号上，请查收。", {
                  confirmButtonText: "确定",
                  // center: true,
                });
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "error",
                });
              }
            })

            .catch(() => {});
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          
          let { phone, phoneValidation, password } = this.ruleForm;
          forgotpassword({
            username: phone,
            password: password,
            // userType: "website_user",
            code: phoneValidation,
          })
            .then((res) => {
              console.log(res.data, 88888888888);

              if (res.data.code == 200) {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                });
                setTimeout(() => {
                  this.$router.push({
                    path: "/login",
                  });
                }, 1000);
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "error",
                });
              }
            })
            .catch(() => {});
       
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>


.footers {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
    padding: 20px 0;
    background: #ebebeb;
    text-align: center;
    div,
    a {
      margin-bottom: 2px;
      color: #323232;
      font-size: 14px;
    }
  }
::v-deep .main {
  margin-top: 0 !important;
}
::v-deep .el-input__inner{
height: 45px;
line-height: 45px;
}
.login {
  .tips{
    text-align: right;
    padding: 15px 0 20px 0;
    cursor: pointer;
    color: #323232;
    font-size: 14px;
   
   }
   .tips1{
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    color: #323232;
   }
   ::v-deep .el-button--primary{
    background: #25a2ab;
    border: 1px solid #25a2ab;
   }
  .btn{
    width: 100%;
    background: #25a2ab;
    border: 1px solid #25a2ab;
    height: 45px;
    font-size: 18px;
  }
  .sendMsg {
    height: 45px;
    vertical-align: middle;
    width: 100px;
    margin-left: 5px;
    padding: 10px 15px;
  }
  .mid {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    .tops{
      margin-bottom: 40px;
      display: flex;
      align-items: center;
      font-size: 26px;
      color: #323232;
      // justify-content: center;
      img{
        width: auto;
        display: block;
        height: 50px;
        margin: 0 15px 0 0;
      }
    }
 
    .code {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .demo-ruleForm {
      padding: 40px;
      margin-right: 250px;
      width: 400px;
      height: 420px;
      background: #fff;
    }
    margin:70px 0;
    width: 100%;
    img {
      display: block;
      width: 100%;
    }
    height: 600px;
    // background: #ccc;
    background: url("../../assets/login/bg3.jpg") no-repeat;
    background-size: 100% 100%;
  }
  .top {
    height: 103px;
    background: #ebebeb;
    width: 100%;

    .sameDiv {
      height: 100%;
      display: flex;
      align-items: center;
      img {
        height: 62px;
      }
    }
  }
}
</style>